<template>
  <div class="app-container calendar-list-container user-container">
    <div class="filter-container">
      <el-form>
        <el-row class="row-bg" justify="space-around" type="flex">
          <el-col :span="8">
            <el-form-item label="用户账号">
              <el-input v-model="queryCondition.loginId" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户名称">
              <el-input v-model="queryCondition.name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户状态">
              <el-select clearable
                         v-model="queryCondition.status">
                <el-option :key="item.status"
                           :label="item.label"
                           :value="item.value"
                           v-for="item in userStatusConstant"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-bg"
                justify="space-around"
                type="flex">
          <el-col :span="8">
            <el-form-item label="手机号">
              <el-input v-model="queryCondition.phone">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱">
              <el-input v-model="queryCondition.email">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
        <el-row :gutter="0"
                class="cutOffLine">
          <div class="buttonGroup">
            <el-button @click="queryAllUser"
                       size="small"
                       type="primary">
              <icon name="search"></icon>
              查询
            </el-button>
          </div>
        </el-row>
        <el-row :gutter="0">
          <el-button @click="enableAddUser"
                     class="filter-item"
                     size="small"
                     type="primary">
            <icon name="plus"></icon>
            新增
          </el-button>
          <el-button @click="showModifyUserDialog"
                     class="filter-item"
                     size="small"
                     type="primary">
            <icon name="edit"></icon>
            修改
          </el-button>
          <el-button @click="showModifyUserRoleDialog"
                     class="filter-item"
                     size="small"
                     type="primary">
            <icon name="user"></icon>
            角色
          </el-button>
          <el-button @click="showCloneUserRoleDialog"
                     class="filter-item"
                     size="small"
                     type="primary">
            <icon name="files-o"></icon>
            克隆
          </el-button>
        </el-row>
      </el-form>
    </div>
    <el-table :data="userList"
              @cell-click="toggleSelection"
              @current-change="handleCurrentRowChange"
              @row-click='enableUserEdit'
              border
              element-loading-background="rgba(0, 0, 0, 0.8)"
              element-loading-spinner="el-icon-loading"
              element-loading-text="加载中"
              fit
              highlight-current-row
              ref="singleTable"
              stripe>
      <el-table-column align="center"
                       label=""
                       width="30">
        <template slot-scope="scope">
          <el-radio :change="toggleSelection"
                    :label="scope.row.loginId"
                    name="notice"
                    v-model="currentSelectUserId">
            <span></span>
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column align="left"
                       label='账号名称'
                       width="150px">
        <template slot-scope="scope">
          <span>{{scope.row.loginId}}</span>
        </template>
      </el-table-column>
      <el-table-column align="left"
                       label='用户姓名'
                       width="100px">
        <template slot-scope="scope">
          <div>{{scope.row.name}}</div>
        </template>
      </el-table-column>
      <el-table-column align="left"
                       label='用户流水号'
                       width="80px">
        <template slot-scope="scope">
          <span>{{scope.row.customerNo}}</span>
        </template>
      </el-table-column>
      <el-table-column align="left"
                       label='手机'
                       width="100px">
        <template slot-scope="scope">
          <span>{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <el-table-column align="left"
                       label='邮箱'
                       width="150px">
        <template slot-scope="scope">
          <span>{{scope.row.email}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label='用户状态'
                       width="80px">
        <template slot-scope="scope">
          <span>{{scope.row.status | displayLabelValue(userStatusConstant)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="left"
                       label='上次登录时间'
                       width="150px">
        <template slot-scope="scope">
          <span>{{scope.row.lastLoginTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label='密码更新时间'
                       width="150px">
        <template slot-scope="scope">
          <span>{{scope.row.passwordUpdateLastTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label='用户创建时间'
                       prop="createTime"
                       width="150px">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="left"
                       label='用户备注'>
        <template slot-scope="scope">
          <span>{{scope.row.comment}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="currentPage"
                   :page-size="pageSize"
                   :total="totalCount"
                   @current-change="handleCurrentChange"
                   class="paging"
                   layout="total, prev, pager, next, jumper"
                   small>
    </el-pagination>

    <el-dialog :title="userDialog.title"
               :visible.sync="userDialog.show"
               @close="clearForm('userForm')"
               @open="setData('userForm')"
               width="40%">
      <el-form :model="userForm"
               :rules="rules"
               class="demo-ruleForm"
               ref="userForm">
        <el-form-item :label-width="formLabelWidth"
                      label="用户账号"
                      prop="loginId">
          <el-input :disabled="isEdit"
                    v-model="userForm.loginId"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="用户名称"
                      prop="name">
          <el-input auto-complete="off"
                    v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="手机号"
                      prop="phone">
          <el-input auto-complete="off"
                    v-model="userForm.phone"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="邮箱"
                      prop="email">
          <el-input auto-complete="off"
                    v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="用户密码"
                      prop="password">
          <el-input auto-complete="off"
                    :type="passwordBlur?'password':'text'"
                    v-model="userForm.password">
          </el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="确认密码"
                      prop="passwordConfirm">
          <el-input auto-complete="off"
                    :type="passwordBlur?'password':'text'"
                    v-model="userForm.passwordConfirm">
          </el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="用户状态"
                      prop="status"
                      v-show="isEdit">
          <el-radio label="1"
                    size="small"
                    style="margin-top:5px;"
                    v-model="userForm.status"
                    value="1">可用</el-radio>
          <el-radio label="0"
                    size="small"
                    style="margin-top:5px;margin-left:10px;"
                    v-model="userForm.status"
                    value="0">
            不可用
          </el-radio>
        </el-form-item>
        <el-form-item>
          <el-button @click="validateForm('userForm')"
                     size="small"
                     type="primary">确 定</el-button>
          <el-button @click="userDialog.show = false"
                     size="small">取 消</el-button>
          <el-button @click="setInitPassword"
                     size="small">初始密码</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="cloneUserRoleDialog"
               @close="cloneUserRoleDialogClose('cloneUserRoleForm')"
               @open="cloneUserRoleDialogOpen()"
               title="角色克隆"
               width="40%">
      <el-form :model="cloneUserRoleForm"
               :rules="cloneUserRules"
               class="demo-ruleForm"
               ref="cloneUserRoleForm">
        <el-form-item :label-width="formLabelWidth"
                      label="用户账号"
                      prop="loginId">
          <el-input readonly
                    v-model="cloneUserRoleForm.loginId"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="目标用户账号"
                      prop="targetUserId">
          <el-input v-model="cloneUserRoleForm.targetUserId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="validateCloneUserRoleForm('cloneUserRoleForm')"
                     size="small"
                     type="primary">确 定</el-button>
          <el-button @click="cloneUserRoleDialog = false"
                     size="small">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="modifyUserRoleDialog"
               @close="closeModifyUserRoleDialog"
               center
               title="角色管理"
               top="5%"
               width="70%">
      <el-row :gutter="30">
        <el-col :span="8">
          <el-tree
            :check-strictly="true"
            :data="roleTreeData"
            :expand-on-click-node="false"
            :props="defaultRoleProps"
            @check="handleCheckedRolesChange"
            default-expand-all
            node-key="id"
            ref="roleTree"
            show-checkbox/>
        </el-col>

        <el-col :span="16">
          <div class="app-container calendar-list-container">

            <div ref="permitDiv"
                 v-if="permitRootList!=null">

              <el-collapse style="overflow: auto;height: 544px; margin-top:-20px;"
                           v-model="activeNames">

                <el-collapse-item :key="permitNode.clientType"
                                  :name=permitNode.clientType
                                  v-for="permitNode in permitRootList">
                  <template slot="title">
                    <span>{{permitNode.clientType | displayLabelValue(clientType)}}</span>
                  </template>
                  <el-tree :data=permitNode.subMenu
                           :filter-node-method="filterNode"
                           :props="defaultProps"
                           default-expand-all
                           highlight-current
                           node-key="id"
                           ref="tree"
                           show-checkbox>
                  </el-tree>
                </el-collapse-item>

              </el-collapse>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="dialog-footer"
           slot="footer">
        <el-button @click="modifyUserRole()"
                   size="small"
                   type="primary">确 定</el-button>
        <el-button @click="closeModifyUserRoleDialog()"
                   size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from 'js-md5'
const userStatusConstant = [
  { value: '0', label: '不可用' },
  { value: '1', label: '可用' }
]
export default {
  data () {
    const validatePasswordConfirm = (rule, value, callback) => {
      if (value === '') {
        if (!this.currentSelectUserId) {
          callback(new Error('请再次输入密码'))
        } else {
          callback()
        }
      } else if (value !== this.userForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value === '' || !value) {
        if (!this.currentSelectUserId) {
          callback(new Error('请输入密码'))
        } else {
          callback()
        }
      } else {
        if (value.length < 6) {
          callback(new Error('密码长度不小于6位'))
        } else if (value.length > 18) {
          callback(new Error('密码长度不大于18位'))
        } else if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z!@#$%^&*()]{6,18}$/.test(value) === false) {
          callback(new Error('密码必须是数字和字母组合'))
        } else {
          callback()
        }
      }
    }
    return {
      rules: {
        loginId: [
          { required: true, message: '请输入用户账号', trigger: 'blur' },
          { max: 50, message: '长度不大于50', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { max: 60, message: '长度不大于60', trigger: 'blur' },
          { pattern: /^[\S]*$/, message: '用户名不能包含不可见字符' }
        ],
        phone: [
          {required: false, message: '请输入电话号码', trigger: 'blur'},
          {max: 60, message: '长度不大于60', trigger: 'blur'},
          {pattern: /^([0-9-]+)$/, message: '不是有效的电话号码'}
        ],
        email: [
          {required: false, message: '请输入用户邮箱', trigger: 'blur'},
          {max: 60, message: '长度不大于60', trigger: 'blur'},
          {pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '不是有效的邮箱'}
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        passwordConfirm: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: validatePasswordConfirm, trigger: 'blur' }

        ]
      },
      cloneUserRules: {
        targetUserId: [
          { required: true, message: '请输入目标用户账号', trigger: 'blur' },
          { max: 50, message: '长度不大于50', trigger: 'blur' }
        ]
      },
      apiName: {
        queryUserList: this.apiType.admin.queryAllUser,
        addUser: this.apiType.admin.addUser,
        modifyUser: this.apiType.admin.modifyUser,
        queryAllPermitList: this.apiType.admin.queryAllPermitList,
        queryPermitListByRoleIdList: this.apiType.admin.queryPermitListByRoleIdList,
        queryUserRole: this.apiType.admin.queryUserRole,
        queryRoleTree: this.apiType.admin.queryRoleTree,
        bindUserRole: this.apiType.admin.bindUserRole,
        cloneUserRole: this.apiType.admin.cloneUserRole
      },
      queryCondition: {
        loginId: '',
        name: '',
        phone: '',
        email: '',
        status: ''
      },
      userDialog: {
        title: '',
        show: false
      },

      currentRolePage: 1,
      rolePageSize: 100,
      totalRoleCount: 0,
      radio: '',
      title: '',
      passwordBlur: true,
      cloneUserRoleDialog: false,
      modifyUserRoleDialog: false,
      formLabelWidth: '100px',
      userStatus: '',
      userForm: {
        loginId: '',
        name: '',
        phone: '',
        email: '',
        password: '',
        passwordConfirm: '',
        status: ''
      },
      cloneUserRoleForm: {
        loginId: '',
        targetUserId: ''
      },
      userStatusConstant,
      isEdit: '',
      userList: [],
      roleList: [],
      roleTreeData: [{
        id: -1,
        name: '角色树',
        disabled: true,
        subRole: []
      }],
      checkRoleIdList: [],
      checkAll: false,
      queryUser: '',
      isIndeterminate: true,
      currentPage: 1,
      pageSize: 20,
      totalCount: 0,
      permitRootList: '',
      rolePermitList: '',
      subList: '',
      activeNames: '',
      currentRow: {},
      defaultProps: {
        children: 'subMenu',
        label: 'showName'
      },
      defaultRoleProps: {
        children: 'subRole',
        label: 'name'
      },
      currentSelectUserId: ''
    }
  },
  mounted () {
    this.queryAllUser()
    this.queryAllPermitList()
    this.queryRoleTree()
  },
  watch: {
    checkRoleIdList (val) {
      this.$refs.roleTree.setCheckedKeys(val, true)
      this.showPermitListTree(val)
    }
  },
  methods: {
    setInitPassword () {
      this.passwordBlur = false
      const initPassword = this.randomString(8)
      this.userForm.password = initPassword
      this.userForm.passwordConfirm = initPassword
    },
    // 使checkbox禁选
    disableAllCheckBox (data) {
      data = data || []
      data.forEach(item => {
        item.disabled = true
        if (item.subMenu) {
          this.disableAllCheckBox(item.subMenu)
        }
      })
    },
    toggleSelection (row, column, cell, event) {
      this.currentSelectUserId = row.loginId
    },
    enableAddUser () {
      this.inputCss(true)
      this.userDialog.show = true
      this.isEdit = false
      this.userDialog.title = '用户新增'
      this.currentRow = {}
      this.currentSelectUserId = ''
      this.setCurrent()
    },

    handleCurrentRoleChange (currentRolePage) {
      this.$emit('currentPageChange', currentRolePage)
      this.currentRolePage = currentRolePage
      this.queryUserRoleList()
    },
    setCurrent (row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentRowChange (val) {
      this.currentRow = val || {}
    },
    clearForm (formName) {
      this.currentSelectUserId = ''
      this.setCurrent()
      this.$refs[formName].resetFields()
    },
    setData (formName) {
      this.userForm.loginId = this.currentRow.loginId
      this.userForm.name = this.currentRow.name
      this.userForm.status = this.currentRow.status
      this.userForm.phone = this.currentRow.phone
      this.userForm.email = this.currentRow.email
      this.userForm.password = this.currentRow.password
      this.userForm.passwordConfirm = this.currentRow.passwordConfirm
    },
    cloneUserRoleDialogOpen () {
      this.cloneUserRoleForm.loginId = this.currentSelectUserId
      this.cloneUserRoleForm.initPassword = this.randomString(8)
    },
    cloneUserRoleDialogClose (formName) {
      this.cloneUserRoleForm.loginId = ''
      this.cloneUserRoleForm.targetUserId = ''
      this.currentSelectUserId = ''
      this.setCurrent()
      this.$refs[formName].resetFields()
    },
    enableUserEdit (row) {
      this.currentSelectUserId = row.loginId
      this.currentRow = row
    },

    showPermitListTree (val) {
      const roleIdArray = []
      for (const item in val) {
        if (val[item]) {
          roleIdArray.push(val[item])
        }
      }
      this.queryPermitListByRoleList({roleId: roleIdArray})
    },
    expandAllPermitList (param, needFilter, expectExpandArr) {
      expectExpandArr = expectExpandArr || []
      const items = param
      const nameArray = []
      items.forEach(item => {
        const subSystem = item.clientType
        if (needFilter) {
          if (expectExpandArr.indexOf(subSystem) > -1) {
            nameArray.push(subSystem)
          }
        } else {
          nameArray.push(subSystem)
        }
      })
      this.activeNames = nameArray
    },
    queryPermitListByRoleList (param) {
      const _this = this
      _this.rolePermitList = []
      this.fetch(this.apiName.queryPermitListByRoleIdList, param, null, responseData => {
        const userPermit = responseData.data || []
        const expectExpandArr = []
        const keyList = []
        userPermit.forEach(permit => {
          expectExpandArr.push(permit.clientType)
          keyList.push(permit.id)
        })
        // 配置展开分类权限
        this.activeNames = expectExpandArr
        // 配置权限树选中条件
        const trees = _this.$refs.tree
        for (const item in trees) {
          trees[item].setCheckedKeys(keyList)
          trees[item].filter(userPermit)
        }
      })
    },
    queryAllPermitList () {
      this.fetch(this.apiName.queryAllPermitList, null, null, responseData => {
        const data = responseData.data || []
        this.disableAllCheckBox(data)
        this.permitRootList = data
      })
    },
    filterNode (value, data) {
      if (!value) {
        return false
      }
      for (const item in value) {
        if (data.id === value[item].id) {
          return true
        }
      }
      return false
    },
    queryAllUser () {
      const param = {
        loginId: this.queryCondition.loginId,
        name: this.queryCondition.name,
        phone: this.queryCondition.phone,
        email: this.queryCondition.email,
        status: this.queryCondition.status,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      const _this = this
      this.fetch(this.apiName.queryUserList, param, null, responseData => {
        _this.userList = responseData.data.info
        _this.totalCount = Number(responseData.data.totalPages)
        _this.currentSelectUserId = ''
      })
    },
    changeSize () {
      this._data.tpageSize = this.pageSize
    },
    handleCurrentChange (currentPage) {
      this.$emit('currentPageChange', currentPage)
      this.currentPage = currentPage
      this.queryAllUser()
    },
    setDatalist (arr) {
      this.slist = JSON.parse(JSON.stringify(arr))
    },
    validateForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isEdit) {
            this.modifyUser()
          } else {
            this.addUser()
          }
        } else {
          return false
        }
      })
    },
    validateCloneUserRoleForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.cloneUserRole()
        } else {
          return false
        }
      })
    },
    cloneUserRole () {
      const param = {
        loginId: this.cloneUserRoleForm.loginId,
        targetUserId: this.cloneUserRoleForm.targetUserId
      }
      const _this = this
      this.fetch(this.apiName.cloneUserRole, param, null, () => {
        _this.cloneUserRoleDialog = false
        _this.$message({
          showClose: true,
          message: '克隆用户角色成功',
          type: 'success',
          duration: 2000
        })
        _this.queryAlluser()
      }, responseData => {
        _this.$alert('请求错误：' + responseData.data.message)
      }
      )
    },
    addUser () {
      const body = {
        loginId: this.userForm.loginId,
        userName: this.userForm.name,
        phone: this.userForm.phone,
        email: this.userForm.email,
        password: this.encryptPassword(this.userForm.password),
        passwordConfirm: this.encryptPassword(this.userForm.passwordConfirm)

      }
      const _this = this
      this.fetch(this.apiName.addUser, null, body, responseData => {
        _this.userDialog.show = false
        _this.$message({
          showClose: true,
          message: '新增用户成功',
          type: 'success',
          duration: 2000
        })
        _this.queryAlluser()
      })
    },
    encryptPassword (password) {
      if (password != null && password.length > 0) {
        return md5(password)
      } else {
        return null
      }
    },
    modifyUser () {
      const _this = this
      const body = {
        userId: this.currentRow.id,
        loginId: this.userForm.loginId,
        userName: this.userForm.name,
        phone: this.userForm.phone,
        email: this.userForm.email,
        password: this.encryptPassword(this.userForm.password),
        passwordConfirm: this.encryptPassword(this.userForm.passwordConfirm),
        status: this.userForm.status
      }
      this.fetch(this.apiName.modifyUser, null, body, responseData => {
        _this.userDialog.show = false
        _this.$message({
          showClose: true,
          message: '修改用户成功',
          type: 'success',
          duration: 2000
        })
        _this.queryAllUser()
        _this.currentSelectUserId = ''
      }, responseData => {
        _this.$alert('请求错误：' + responseData.data.message)
      }
      )
    },
    modifyUserRole () {
      const body = {
        userId: this.currentRow.id,
        roleIdList: this.checkRoleIdList
      }
      const _this = this
      this.fetch(this.apiName.bindUserRole, null, body, responseData => {
        _this.modifyUserRoleDialog = false
        _this.$message({
          showClose: true,
          message: '修改用户角色成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    inputCss (val) {
      const passwordRule = this.rules.password[0]
      this.$set(passwordRule, 'required', val)
      const passwordConfirm = this.rules.passwordConfirm[0]
      this.$set(passwordConfirm, 'required', val)
    },
    showModifyUserDialog (row) {
      if (this.currentSelectUserId) {
        this.inputCss(false)
        this.isEdit = true
        this.userDialog.title = '用户修改'
        this.userDialog.show = true
      } else {
        this.$alert('请选择一条数据')
      }
    },
    showCloneUserRoleDialog () {
      if (!this.currentSelectUserId) {
        this.$alert('请选择一条数据')
        return
      }
      this.cloneUserRoleDialog = true
    },
    showModifyUserRoleDialog () {
      if (!this.currentSelectUserId) {
        this.$alert('请选择一条数据')
        return
      }
      this.modifyUserRoleDialog = true
      this.queryUserRoleList()
    },
    queryUserRoleList () {
      const _this = this
      const param = {
        userId: this.currentRow.id
      }
      this.fetch(this.apiName.queryUserRole, param, null, responseData => {
        _this.roleList = responseData.data || []
        for (let index in _this.roleList) {
          if (_this.roleList[index].bind === '1') {
            _this.checkRoleIdList.push(_this.roleList[index].id)
          }
        }
        _this.$refs.roleTree.setCheckedKeys(_this.checkRoleIdList, true)
      })
    },
    queryRoleTree () {
      const _this = this
      this.fetch(this.apiName.queryRoleTree, null, null, responseData => {
        _this.roleTreeData[0].subRole = responseData.data || []
      })
    },
    closeModifyUserRoleDialog () {
      this.currentSelectUserId = ''
      this.modifyUserRoleDialog = false
      this.checkRoleIdList = []
    },
    handleCheckedRolesChange (checkedNodes, checkedKeys) {
      // 单选
      // if (checkedKeys.checkedKeys.indexOf(checkedNodes.id) === -1) {
      //   this.checkRoleIdList = ''
      // } else {
      //   this.checkRoleIdList = [checkedNodes.id]
      // }

      // 多选
      if (checkedKeys.checkedKeys.indexOf(checkedNodes.id) === -1) {
        this.checkRoleIdList.forEach((item, index, arr) => {
          if (item === checkedNodes.id) {
            this.checkRoleIdList.splice(index, 1)
          }
        })
      } else {
        this.checkRoleIdList.push(checkedNodes.id)
      }
    }

  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .user-container .el-dialog .el-dialog__body .el-collapse {
    overflow-x: hidden !important;
  }

  .user-container
  .el-dialog
  .el-dialog__body
  .el-collapse
  .el-collapse-item
  .el-collapse-item__header {
    height: 30px;
    line-height: 30px;
  }

  .user-container
  .el-collapse
  .el-collapse-item
  .el-collapse-item__content
  .el-tree-node__content {
    height: 20px;
    line-height: 20px;
  }

  .user-container
  .el-dialog
  .el-dialog__body
  .el-collapse
  .el-collapse-item
  .el-collapse-item__header
  i {
    line-height: 30px;
  }

  .demo-ruleForm .el-form-item__content .el-input {
    max-width: 91%;
  }

  .demo-ruleForm .el-form-item__content .el-form-item__error {
    padding-top: 4px !important;
  }

  .user-container .el-radio__label {
    padding-left: 4px;
  }

  .user-container .el-collapse .el-collapse-item .el-collapse-item__content {
    padding-bottom: 5px;
  }
</style>
